﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<meta http-equiv="content-Type" content="text/html;charset=gb2312">
		<script src="../js/DateJS.js" type="text/javascript">
		</script>
	</head>

	<body>
		<div id="StaffDepartment">
			<div class="div2">
				<table width="354" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td width="118">
							<a href="ygyd1.html">
								<div class="div1" style=" background-color:#F90">
									<h4 style="text-align:center; line-height:0"> 员工部门调动</h4>
								</div>
							</a>
						</td>
						<td width="118">
							<a href="ygyd2.html">
								<div class="div1">
									<h4 style="text-align:center; line-height:0"> 员工岗位调动</h4>
								</div>
							</a>
						</td>
						<td width="118">
							<a href="ygyd3.html">
								<div>

								</div>
							</a>
						</td>
					</tr>
				</table>
			</div>
			<div class="div3">
				<h1>员工部门调动信息填写</h1>
				<div>
					<form onsubmit="return false">
						<table width="552px" height="270px" class="table" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td width="122" height="30" rowspan="9">&nbsp;

								</td>
								<td width="115" height="30" align="right">
									员工编号：
								</td>
								<td width="193" align="left">
									<input v-model="id" type="number" @blur.bative.capture='selectById()'/>
									<font color="#FF0000">*</font>
								</td>
								<td width="122">
									<font color="#FF0000" size="-1">注意：" * "为必填项--输入员工号后可自动生成姓名与部门</font>
								</td>
							</tr>
							<tr>
								<td height="30" align="right">
									员工姓名：
								</td>
								<td align="left">
									<input v-model="user_name" disabled="disabled" />
									<font color="#FF0000">*</font>
								</td>
								<td>&nbsp;

								</td>
							</tr>
							<tr>
								<td height="30" align="right">
									调转前的部门：
								</td>
								<td align="left">
									<select v-model="department" disabled="disabled" >

										<option value="销售部">销售部</option>

										<option value="市场部">市场部</option>

										<option value="创意部">创意部</option>

										<option value="人事部">人事部</option>

										<option value="管理部">管理部</option>

										<option value="部门测试">部门测试</option>

									</select>
									<font color="#FF0000">*</font>
								</td>
								<td>&nbsp;

								</td>
							</tr>
							<tr>
								<td height="30" align="right">
									调转后的部门：
								</td>
								<td align="left">
									<select v-model="newdept">

										<option value="销售部">销售部</option>

										<option value="市场部 ">市场部</option>

										<option value="创意部 ">创意部</option>

										<option value="人事部 ">人事部</option>

										<option value="管理部 ">管理部</option>

										<option value="部门测试 ">部门测试</option>

									</select>
									<font color="#FF0000 ">*</font>
								</td>
								<td>&nbsp;

								</td>
							</tr>
							<tr>
								<td height="30 " align="right ">
									调转类型：
								</td>
								<td align="left ">
									<select v-model="type" >
										<option value="主动调动">
											主动调动
										</option>
										<option value="被动调动 ">
											被动调动
										</option>
										<option value="数据错误 ">
											数据错误
										</option>
									</select>
									<font color="#FF0000 ">*</font>
								</td>
								<td>&nbsp;

								</td>
							</tr>
							<tr>
								<td height="30 " align="right ">
									调转原因：
								</td>
								<td align="left ">
									<input v-model="reason" type="text" />
								</td>
								<td>&nbsp;

								</td>
							</tr>
							<tr>
								<td height="30 " align="right ">
									备注：
								</td>
								<td align="left ">
									<input v-model="remarks" type="text" />
								</td>
								<td>&nbsp;

								</td>
							</tr>
							<tr>
								<td height="30 " align="right ">
									调动日期：
								</td>
								<td align="left ">
									<input type="date" style="border: 1px solid #999; " v-model="transfer_date"/>
									<font color="#FF0000 ">*</font>
								</td>
								<td>&nbsp;

								</td>
							</tr>
							<tr>
								<td height="30 " align="right ">
									<a href="ygxxcx.html ">员工列表查询</a>
								</td>
								<td align="left ">
									<button @click="updateStaffDepartment()">提交</button>
									<input type="reset" value="重置 " />
								</td>
								<td>&nbsp;

								</td>
							</tr>
						</table>
					</form>
					<h3 style="color:red; "></h3>
				</div>

			</div>
		</div>

		<style type="text/css">
			body {
				background-color: #3994EE;
				text-align: center;
			}
			
			.div1 {
				background-image: url(img/1.png);
				width: 118px;
				height: 60px;
				color: #F6F6F6;
				float: left;
			}
			
			.div1:hover {
				background-image: url(img/2.png);
			}
			
			.div1:active {
				background-image: url(img/3.png);
			}
			
			a {
				text-decoration: none;
			}
			
			.div2 {
				height: 1px;
			}
			
			.div3 {
				border: #0CF solid 2px;
				height: 600px;
				margin-top: 65px;
				background-color: #E7FEED;
			}
			
			.table {
				margin: auto;
			}
			
			.input1 {
				background-color: #EEA6AD;
			}
		</style>

		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
			axios.defaults.baseURL = "http://176.55.4.113"
			const StaffDepartment = new Vue({
				el: "#StaffDepartment",
				data: {
					id: '',
					user_name: '',
					department: '销售部',
					newdept: '销售部',
					type: '主动调动',
					reason: '',
					remarks: '',
					transfer_date: ''
				},
				methods: {
					selectById(){
						axios.get("/staff_status/queryByStaffId?id="+this.id)
						.then(result =>{
							this.user_name = result.data.data.user_name,
							this.department = result.data.data.department					 
						})
					},
					updateStaffDepartment(){
						axios.put("/staff_status/department",{
							id: this.id,
							after_dept: this.newdept,
							dept_type: this.type,
							dept_cause: this.reason,
							dept_remarks: this.remarks,
							dept_transfer_date: this.transfer_date
						})
						.then(result =>{
							if(result.data.status == 200){
								alert("修改成功")
							}else{
								alert("修改失败")
							}
						})
					}
				}
			})
		</script>
	</body>

</html>